<template>
  <div>
      <Card>
          <t-row justify="space-between">
            <div class="left-operation-container">
            <t-form :data="formData" labelWidth="70px" :rules="rules" :colon="true" :requiredMark="false" :showErrorMessage="true" ref="form" layout="inline"  scrollToFirstError="smooth">
                <t-form-item label="搜索" help="请输入订单编号" name="search">
                    <t-input v-model="formData.search" class="search-input" placeholder="请输入订单编号" clearable>
                        <template #suffix-icon>
                            <search-icon size="20px" />
                        </template>
                    </t-input>
                </t-form-item>
                <t-form-item label="剧本类型" name="states">
                <t-select
                    v-model="formData.states"
                    style="width: 200px;"
                    :options="states"
                    clearable
                    placeholder="请选择"
                >
                    <icon
                    name="browse"
                    slot="prefixIcon"
                    />
                </t-select>
                </t-form-item>
                <t-form-item label="剧本需要人数" name="orders">
                <t-select
                    v-model="formData.orders"
                    style="width: 200px;"
                    :options="orders"
                    clearable
                    placeholder="请选择"
                >
                    <icon
                    name="browse"
                    slot="prefixIcon"
                    />
                </t-select>
                </t-form-item>
                <t-form-item label="剧本评分" name="payment">
                <t-select
                    v-model="formData.payment"
                    style="width: 200px;"
                    :options="payment"
                    clearable
                    placeholder="请选择"
                >
                    <icon
                    name="browse"
                    slot="prefixIcon"
                    />
                </t-select>
                </t-form-item>
                <!-- <t-form-item label="支付路径" name="Paypath">
                <t-select
                    v-model="formData.Paypath"
                    style="width: 200px;"
                    :options="Paypath"
                    clearable
                    placeholder="请选择"
                >
                    <icon
                    name="browse"
                    slot="prefixIcon"
                    />
                </t-select>
                </t-form-item>
                <t-form-item label="日期" name="datatime">
                <t-date-picker v-model="formData.datatime" theme="primary" mode="date" clearable></t-date-picker>
                </t-form-item> -->
            </t-form>
            </div>
            <div>
                <t-button @click="onSubmit"> 搜索 </t-button>
                <!-- :disabled="!selectedRowKeys.length" -->
                <t-button variant="base" theme="default" class="reset" @click="onReset"> 重置 </t-button>
                <!-- <t-button variant="base" theme="danger" class="reset" @click="deletelistall"> 删除 </t-button> -->
                <span v-if="!!selectedRowKeys.length" class="selected-count">已选{{ selectedRowKeys.length }}项</span>
            </div>
        </t-row>
      </Card>
      <Card style="margin-top: 10px;">
        <div class="addbtn">
            <!-- <t-button variant="base" @click="addscript"> 新增剧本 </t-button> -->
            <t-button variant="base" theme="danger" class="reset" @click="remoaddscript"> 删除 </t-button>
        </div>
          <!-- 列表 -->
       <t-table
          rowKey="index"
          :data="dataall"
          :columns="columns"
          :pagination="pagination"
          :hover="true"
          :loading="dataLoading"
          :selected-row-keys="selectedRowKeys"
          @change="onChange"
          @page-change="onPageChange"
        >
          <template #status="{ row }">
            <t-tag v-if="row.status === 0" theme="warning" variant="light">进行中</t-tag>
            <t-tag v-if="row.status === 1" theme="success" variant="light">已完成</t-tag>
          </template>
          <template #op="slotProps">
              <t-button @click="handleClickDetail(slotProps)">详情</t-button>
              <t-button theme="danger" @click="handleClickDelete(slotProps)">删除</t-button>
          </template>
        </t-table>
      </Card>
      <!-- <Details ref="Details" :confirmBody="details"/> -->
      <t-dialog
      header="确认删除当前所选订单吗？"
      :body="confirmBody"
      :visible.sync="confirmVisible"
      @confirm="onConfirmDelete"
      :onCancel="onCancel"
    >
    </t-dialog>
    <Details ref="Details"  :confirmBody="details"/>
    <!-- <Addscript ref="Addscript"/> -->
  </div>
</template>

<script>
import Card from '@/components/card/index.vue'; // 导入卡片
import { SearchIcon } from 'tdesign-icons-vue';
import { Icon } from 'tdesign-icons-vue'; // 导入icon
import Details from './details.vue' // 导入详情弹框
// import Addscript from './addscript.vue' // 导入新增弹框


const INITIAL_DATA = {
  search: '', // 搜索
  states: '', // 订单状态
  Paypath: '', //支付路径
  orders: '', // 订单分类
  payment: '', // 付款方式
  datatime: '' // 时间
};

export default {
    name: 'scriptdata',
    components: {
        SearchIcon,
        Card,
        Icon,
        Details,
        // Addscript
    },
    data() {
        return {
            indexdelete: 0, // 下标
            confirmVisible: false, // 控制删除对话框显示
            details: {}, // 详情数据
            // 列表数据
            dataall: [],
            expandedRowKeys : [], // 列表选中
            dataLoading: false, // 加载loding
            selectedRowKeys: [],  // 列表页默认选中
            formData: { ...INITIAL_DATA }, // form表单验证   
            rules: {
                // 表单校验
            },
            // 剧本类型下拉选择器
            states: [
                { label: '青春', value: '1' },
                { label: '恐怖', value: '2' },
                { label: '愉快', value: '3' },
            ],
            // 剧本需要人数下拉数据
            orders: [
                { label: '5人', value: '1' },
                { label: '7人', value: '2' },
                { label: '10人', value: '3' },
            ],
            // 剧本评分下拉数据
            payment: [
                { label: '5分', value: '1' },
                { label: '4分', value: '2' },
                { label: '3分', value: '3' },
                { label: '2分', value: '4' },
                { label: '1分', value: '5' },
            ],
            // 支付路径下拉数据
            Paypath:[
                { label: '微信', value: '1' },
                { label: '支付宝', value: '2' },
                { label: '银联', value: '3' },
                { label: '现金', value: '4' },
            ],
            // 列表头部
            columns: [
                { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
                {
                    width: 100,
                    colKey: 'name',
                    title: '名称',
                    ellipsis: true,
                },
                {
                    width: 300,
                    colKey: 'no',
                    title: '编号',
                    ellipsis: true,
                },
                {
                    colKey: 'status',
                    title: '本局状态',
                    width: 200,
                    ellipsis: true,
                },
                {
                    width: 300,
                    colKey: 'updateTime',
                    title: '创建时间',
                    ellipsis: true,
                },
                {
                    width: 300,
                    colKey: 'amount',
                    title: '本局金额',
                    ellipsis: true,
                },
                {
                    colKey: 'adminName',
                    title: '创建人',
                    width: 200,
                    ellipsis: true,
                },
                {
                    colKey: 'timelength',
                    title: '本局时间',
                    width: 200,
                    ellipsis: true,
                },
                {
                    align: 'left',
                    fixed: 'right',
                    width: 200,
                    colKey: 'op',
                    title: '操作',
                },
            ],
            pagination: {
                defaultPageSize: 20,
                total: 0,
                defaultCurrent: 1,
            },
        }
    },
    computed: {
        confirmBody() {
        if (this.indexdelete > -1) {
            if (this.dataall.length != 0) {
            const name = this.dataall[this.indexdelete].name
            return `删除后，${name}的订单信息将被清空，且无法恢复`;
            }
        }
        return '';
        },
    },
    mounted () {
        this.listdata(); // 一进入页面获取数据
    },
    methods: {
        // form表单重置
        onReset() {
            this.$refs.form.reset();
            this.$message.success('重置成功');
            // this.formData = {
            //     search: '', // 搜索
            //     states: '', // 订单状态
            //     Paypath: '', //支付路径
            //     orders: '', // 订单分类
            //     payment: '', // 付款方式
            // };
        },

        // 表单提交发送请求
        onSubmit({ validateResult, firstError }) {
            // if (validateResult === true) {
            //   this.$message.success('提交成功');
            // } else {
            //   console.log('Errors: ', validateResult);
            //   this.$message.warning(firstError);
            // }
            this.listdata();
            this.$message.success('搜索成功')
        },

        rehandlePageChange(curr, pageInfo) {
            console.log('分页变化', curr, pageInfo);
        },

        // 分页、排序、过滤等操作触发均会触发 change 事件
        onChange(params, context) {
            console.log('change:', params, context);
        },

        // 分页变化时触发该事件
        onPageChange(pageInfo) {
            console.log('page-change:', pageInfo);
        },
    
        // 查看详情
        handleClickDetail (rowlist) {
            this.details = rowlist.row
            this.$refs.Details.visible = true
        },

        // 删除
        handleClickDelete (slotProps) {
            this.indexdelete = slotProps.rowIndex
            this.confirmVisible = true;
            // this.dataall.splice(slotProps.rowIndex,1)
            // this.pagination.total = this.dataall.length;
        },

        // 列表删除
        onConfirmDelete() {
            // 真实业务请发起请求
            this.dataall.splice(this.indexdelete, 1);
            this.pagination.total = this.dataall.length;
            const selectedIdx = this.selectedRowKeys.indexOf(this.indexdelete);
            // console.log(selectedIdx);
            if (selectedIdx > -1) {
                this.selectedRowKeys.splice(selectedIdx, 1);
            }
            // console.log(this.$router);
            this.confirmVisible = false;
            this.$message.success('删除成功');
            this.resetIdx();
        },

        // 获取列表数据
        listdata () {
            // /api/office-management
            this.dataLoading = true;
            this.$request.get('/api/office-management').then((res) => {
                // console.log(res,'res');
                if (res.data.code == 200) {
                this.dataLoading = false;
                const list = res.data.data.list.length
                this.dataall = res.data.data.list
                this.pagination = {
                    ...this.pagination,
                    // defaultCurrent: 1,
                    total: list,
                };
                // this.pagination.defaultCurrent = 1
                }
                // console.log(this.dataall);
            }).catch((e) => {
                console.log(e);
            })
        },

        onCancel() {
            this.resetIdx();
        },

        resetIdx() {
            this.indexdelete = -1;
        },

        addscript () {
            // 新增剧本
            this.$refs.Addscript.bodyVisible3 = true; // 打开新增弹框
        },

        remoaddscript () {
            // 删除剧本
        }
    }
}
</script>

<style lang="less" scoped>
.addbtn {   
    padding-left: 94%;
    margin-bottom: 20px;
}
.t-form-inline {
  margin-bottom: 10px;
}
</style>